<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梭哈游戏</title>
    <!--引入css 需要用这个标签-->
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
    <script src="js/web3.js"></script>
    <!--核心js 文件.-->
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .layout {
            width: 80%;
            margin: 40px auto;
        }

        .area_showhand {
            border: 1px solid #ccc;
            width: 90%;
            margin: 20px auto;
            height: 200px;
            border-radius: 5px;
        }

        .first_address, .second_address {
            width: 90%;
            padding-left: 50px;
        }

        .area_showhand ul {

        }

        .area_showhand ul li {
            width: 20%;
            float: left;
        }

        .area_showhand ul li a {
            display: block;
            width: 60%;
            margin: 10px auto;
        }

        .area_showhand ul li a img {
            width: 100%;
            border: 1px solid #ccc;
            height: 180px;
        }

        .weiclass {
            width: 100px;
            display: inline-block;
        }
    </style>
    <script>
        //add web3 call here!

        //全局变量
        var web3 ;
        //2. 构造合约实例
        var contractAddr = "0x5831b6d565e3ce7e852c12235338fecc98914440";//remix
        var abi = [
            {
                "constant": false,
                "inputs": [],
                "name": "bet",
                "outputs": [],
                "payable": true,
                "stateMutability": "payable",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [],
                "name": "bringInBet",
                "outputs": [],
                "payable": true,
                "stateMutability": "payable",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [],
                "name": "flod",
                "outputs": [],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [],
                "name": "join",
                "outputs": [],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "anonymous": false,
                "inputs": [
                    {
                        "indexed": false,
                        "name": "player",
                        "type": "address"
                    },
                    {
                        "indexed": false,
                        "name": "card",
                        "type": "uint256"
                    }
                ],
                "name": "onDealCard",
                "type": "event"
            },
            {
                "anonymous": false,
                "inputs": [
                    {
                        "indexed": false,
                        "name": "player",
                        "type": "address"
                    }
                ],
                "name": "onPlayerJoin",
                "type": "event"
            },
            {
                "anonymous": false,
                "inputs": [],
                "name": "onCreateGame",
                "type": "event"
            },
            {
                "constant": false,
                "inputs": [],
                "name": "pass",
                "outputs": [],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [],
                "name": "withDraw",
                "outputs": [],
                "payable": true,
                "stateMutability": "payable",
                "type": "function"
            },
            {
                "inputs": [
                    {
                        "name": "_cto",
                        "type": "address"
                    }
                ],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "constructor"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "activePlayer",
                "outputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "getActivePlayer",
                "outputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "index",
                        "type": "uint256"
                    }
                ],
                "name": "getPlayerCards",
                "outputs": [
                    {
                        "name": "hoster",
                        "type": "uint8"
                    },
                    {
                        "name": "guester",
                        "type": "uint8"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "getPocket",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint8"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "guestPlayer",
                "outputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "hostPlayer",
                "outputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "isGameFinish",
                "outputs": [
                    {
                        "name": "",
                        "type": "bool"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "name": "isPlayerActioned",
                "outputs": [
                    {
                        "name": "",
                        "type": "bool"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "minimalBet",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "name": "roudBalance",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "round",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "name": "totalBalance",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "winner",
                "outputs": [
                    {
                        "name": "",
                        "type": "address"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            }
        ];

        var showhand;
        var acctAddr = '';


        function getRoundBalance(){
            showhand.methods.roudBalance(acctAddr).call().then((data) => {
                console.log(acctAddr + " 获取本轮下注的余额; "  + data);
                $("#balance").html(data);
                getAllRoundBalance();
            });

        }
        
        function getAllRoundBalance() {
            showhand.methods.totalBalance(acctAddr).call().then((data) => {
                console.log(acctAddr + " 获取全部下注的余额; "  + data);
                $("#allBalance").html(data);
            });
        }

        //看谁说话

        function getActivePlayer(){

            showhand.methods.getActivePlayer().call().then((data) => {
                console.log("data : " + data);
                $("#activeAddr").val(data);
                if(acctAddr == data){
                    alert("当前你是说话权的玩家可以继续说话");
                }else{
                    alert("当前你不是说话玩家，请等待对方操作！");
                }
            });
        }

        //页面自动加载
        $(function () {
            //1. 构造web3对象
            web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545"));
            console.log(web3);
            web3.eth.getAccounts(function (error, result) {
                console.log(result);
            });

            showhand = new web3.eth.Contract(abi, contractAddr);
            console.log(showhand);


            /// 第二部分 实现 开始
            $('#myModal').modal();
                if(acctAddr == ''){
            }
            // 加入游戏：获取账户地址，调用join方法
            $(".joinGame").on("click", function () {
                acctAddr = $("#addressId").val();
                console.log(acctAddr);
                $("#showAddr").val(acctAddr);
                //调用join方法
                showhand.methods.join().send({
                    from: acctAddr,
                    gas: 3000000
                }, function (error, result) {
                    if (!error) {
                        alert("加入成功");
                        $(".close_win").click();
                    } else {
                        console.log(error);
                    }
                });
            });
            /// 下底注：调用bringIn方法，传递values=100
            $(".BringIn").on("click", function () {
                showhand.methods.bringInBet().send({
                    from: acctAddr,
                    value: 100,
                    gas: 3000000
                }, function (error, result) {
                    if (!error) {
                        alert("下底注成功");
                        getActivePlayer();
                    }
                });
            });

            //显示明牌： 根据点击的位置获取对应所有玩家的牌，底牌不可用
            function showMingPai(num) {
                showhand.methods.getPlayerCards(num - 1).call(function (error, result) {
                    var host = result.hoster;
                    var guest = result.guester;

                    var expre = ".first ul li:nth-child(" + num + ") img";
                    $(expre).attr("src", "images/" + guest + ".png");
                    $(expre).attr("title", guest);

                    var expre = ".second ul li:nth-child(" + num + ") img";
                    $(expre).attr("src", "images/" + host + ".png");
                    $(expre).attr("title", host);

                });
            }

            var hostAddr;

            //获取hostAddr
            function getHostPlayer() {
                showhand.methods.hostPlayer().call(function (error, result) {
                    if (!error) {
                        hostAddr = result;
                    }
                });
            }

            // 显示底牌，只有玩家自己可见
            function showDiPai() {
                getHostPlayer();
                showhand.methods.getPocket().call({
                    from: acctAddr,
                    toBlock:'latest'
                }, function (error, result) {
                    // 在哪里更新?  hostPlayer???
                    var card = result;
                    // 注意hostAddr 与 acctAddr 大小写可能有切换
                    hostAddr = hostAddr.toLowerCase();//转小写
                    acctAddr = acctAddr.toLowerCase();
                    if (hostAddr == acctAddr) {
                        //代表是host玩家
                        var expre = ".second ul li:nth-child(" + 1 + ") img";
                        $(expre).attr("src", "images/" + card + ".png");
                        $(expre).attr("title", card);
                    }
                    else {
                        var expre = ".first ul li:nth-child(" + 1 + ") img";
                        $(expre).attr("src", "images/" + card + ".png");
                        $(expre).attr("title", card);
                    }
                });
            }

            //调用显示明牌，根据点击位置，调用
            $(".second ul li").on("click", function () {
                var num = $(this).index();
                console.log(num);
                if (num > 0) {
                    showMingPai(num + 1);
                }
                else if (num == 0) {
                    showDiPai();
                }
            });
            // 下注 : 获取下注金额，调用bet函数
            $(".Bet").on("click", function () {
                var amount = $(".getWei").val();
                console.log("bet:", amount);
                showhand.methods.bet().send({
                    from: acctAddr,
                    value: amount,
                    gas: 300000
                }, function (error, result) {
                    if (!error) {
                        alert("下注成功");
                        //获取说话权的玩家
                        getActivePlayer();
                        //调用获取本轮的下注金额
                        getRoundBalance();

                    }
                });
            });

            $(".ActivePlayer").on("click",function () {
                let data = getActivePlayer();
                console.log("result: " + data);

            });

            //过牌pass
            $(".pass").on('click',function () {
                showhand.methods.pass().send({
                    from : acctAddr
                },function (error,result) {
                    if(!error){
                        alert("让牌成功!!");
                        //获取说话权的玩家
                        getActivePlayer();
                    }
                });
            });

            //弃牌flod
            $(".fold").on('click',function () {
                showhand.methods.flod().send({
                    from : acctAddr
                },function (error,result) {
                    if(!error){
                        alert("弃牌成功!!");
                    }
                });
            });

            //查看赢家
            //弃牌flod
            $(".getWinner").on('click',function () {
                showhand.methods.winner().call(function (error,result) {
                    if(!error){
                        console.log("当前赢家：" + result);
                        if(result == '0x0000000000000000000000000000000000000000'){
                            alert("比赛还在进行中");
                        }else{
                            if(result == acctAddr){
                                alert("这局比赛，你是赢家");
                            }else{
                                alert("这局比赛，你输掉了");
                            }
                        }
                    }
                });
            });
        });


    </script>
</head>
<body>
<!--弹出窗口部分-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">是否加入游戏</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="addressId">账户地址</label>
                    <input type="email" class="form-control" id="addressId" placeholder="请输入账户地址">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="close_win btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="joinGame btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="layout">
    <!--<div class="first_address">-->
        <!--<span>guestPlayer:</span>-->
        <!--<span>当前回合下注金额：0 $</span>-->
    <!--</div>-->
    <div class="first area_showhand">
        <ul>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
        </ul>
    </div>

    <div class="second_address">
        <span>hostPlayer:</span>
        <span>我当前回合下注金额：<span id="balance">0</span> $</span>
        <span>我总的下注金额：<span id="allBalance">0</span> $</span>
        <span></span>
    </div>
    <div class="second area_showhand">
        <ul>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/55.png" alt=""></a></li>
        </ul>
    </div>
    <div style="text-align: center;">
        wei:<input type="text" class="getWei form-control weiclass">
        <button type="button" class="BringIn btn btn-danger">下底注</button>
        <button type="button" class="Bet btn btn-primary">下注</button>
        <button type="button" class="fold btn btn-primary">弃牌(flod)</button>
        <button type="button" class="pass btn btn-primary">让牌(pass)</button>
        <button type="button" class="ActivePlayer btn btn-primary">该谁说话</button>
        <button type="button" class="getWinner btn btn-primary">查看赢家</button>

    </div>

    <div style="text-align: center;">
        当前玩家地址：<input type="text"  style="width: 80%" id="showAddr" readonly="readonly"/>
    </div>
    <div style="text-align: center;">
        当前说话权玩家地址：<input type="text"  style="width: 80%" id="activeAddr" readonly="readonly"/>
    </div>
</div>

</body>
</html>
